<template>
  <div style="margin: -20px;">
	<el-container >
		<el-header style="height: 45px; background-color: #eaffe4;text-align: center;line-height: 45px;" >
			 <el-row>
			   <el-button type="primary" @click="Unpaid()" plain>待付款</el-button>
			   <el-button type="primary" @click="My_Money()" plain>已付款</el-button>
			   <el-button type="primary" plain>已完成</el-button>
			   <el-button type="primary" plain>已取消</el-button>
			 </el-row>
			
		</el-header>
		<br>
		
		<el-main style="background-color:#d9d9d9;marrgin-top:15px">
			
			<div>
				
				 <el-table
					:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
					style="width: 100%">
					<!-- <el-table-column
					  label="索引"
					  prop="date">
					</el-table-column> -->
					
					<el-table-column
					 label="索引号"
					  type="index"
					  width="100" align="left">
					</el-table-column>
					
					<el-table-column
					  label="订单下单时间"
					  prop="createDate">
					</el-table-column>
					
					<el-table-column
					  label="订单编号"
					  prop="orderNumber">
					</el-table-column>
					
					<el-table-column
					  label="车位区域"
					  prop="number">
					</el-table-column>
					<el-table-column
					  label="车位状态"
					  prop="state">
					</el-table-column>
					
					<el-table-column label="停留时间">
						<template slot-scope="scope">{{scope.row.duration+'天'}}</template>
					</el-table-column>
					
					
					<el-table-column
					  label="一天价格"
					  prop="price">
					</el-table-column>
					<el-table-column
					  label="总共价格"
					  prop="money">
					</el-table-column>
					
					<el-table-column
					  label="是否缴费"
					  prop="status">
					</el-table-column>
					
					<el-table-column align="right">
					  
					  <template slot-scope="scope">
						
						  <el-button plain :disabled="scope.row.status== '已缴费' " @click="Pay(scope.row)">缴费</el-button>
						  
					  </template>
					</el-table-column>
				  </el-table>
				
			</div>
			
		</el-main>
	   		
	   
	</el-container>
	
  </div>
  
</template>

<script>
	
	export default {
	   data() {
	     return {
	       tableData: [],
	       search: ''
	     }
	   },
	   methods: {
		   Parking(){
			   
			   alert("好烦啊，没得思路")
			   this.axios({
			   	method:"POST",
			   	url:"/Park/findAll",
			   	data:"id=1"
			   }).then((res) =>{
			   	  console.log(res);
			   	  this.tableData=res.data;
			   	  console.log(this.tableData);
			     })
		   },
		   Unpaid(){
			   alert("约吗")
			   this.axios({
			   	method:"POST",
			   	url:"/Park/find",
			   	data:"id=1"
			   }).then((res) =>{
			   	  console.log(res.data);
			   	  this.tableData=res.data;
			   	  console.log(this.tableData);
			     })
			   
		   },
		   Pay(tableData){
			  
			  tableData.status="已缴费"
			   
			   this.axios({
			   	method:"POST",
			   	url:"/Park/test",
			   	data:tableData
			   }).then((res) =>{
			   	  // console.log(res);
			   	  // this.tableData=res.data;
			   	  // console.log(this.tableData);
			     })
			   
		   }
		   
	   },
	 }
	
	
</script>

<style scoped>
  
</style>